import { forwardRef, useImperativeHandle, useState } from 'react';

import { useAntdTable } from 'ahooks';
import { Button, Drawer, Space, Table } from 'antd';
import dayjs from 'dayjs';

import Filter from '@/components/filter';

import { TimeSort } from '@/enum';
import { safeEmployeeCertificatesPage } from '@/services/bizApi/anquanrenyuanchizhengxinxibiaojiekou';

import { BizObject } from './';

export type PaperRef = {
  open: (arg: { userList: string[] }) => void;
};

export type EditProps = {};

const Paper: React.ForwardRefRenderFunction<PaperRef, EditProps> = (_, ref) => {
  const [filter] = Filter.useForm();

  const [show, setShow] = useState(false);
  const [userList, setUserList] = useState<string[]>([]);
  const table = useAntdTable(
    async ({ current, pageSize }, { id, ...formData }) => {
      const query = {
        ...formData,
        ...id,
        nameList: userList ? (typeof userList === 'string' ? [userList] : userList) : undefined,
        page: current,
        size: pageSize,
        timeSort: TimeSort.倒序
      };
      const res = await safeEmployeeCertificatesPage(query);
      return {
        list: res.data?.records || [],
        total: res.data?.total || 0
      };
    },
    {
      form: filter
    }
  );

  useImperativeHandle(ref, () => {
    return {
      open: (args: any) => {
        setUserList(args.userList || []);
        setShow(true);
        table.search.submit();
      }
    };
  });

  const onCancel = () => {
    setShow(false);
  };

  return (
    <Drawer
      title="维修人员持证情况"
      extra={
        <Space>
          <Button onClick={onCancel}>关闭</Button>
        </Space>
      }
      width="50%"
      open={show}
      onClose={onCancel}
    >
      {/* 表格 */}
      <Table<BizObject>
        size="small"
        columns={[
          {
            title: '序号',
            dataIndex: 'index',
            align: 'center',
            width: 60,
            render: (_text, _record, index) => index + 1
          },
          {
            title: '部门名称',
            dataIndex: 'deptName'
          },
          {
            title: '姓名',
            dataIndex: 'name'
          },
          {
            title: '性别',
            dataIndex: 'gender'
          },
          {
            title: '证件类型',
            dataIndex: 'certificateType'
          },
          {
            title: '证件号码',
            dataIndex: 'certificateLevel'
          },
          {
            title: '证件到期时间',
            dataIndex: 'expiryDate',
            render: (v) => (v ? dayjs(v).format('YYYY-MM-DD') : '')
          },
          {
            title: '证件状态',
            dataIndex: 'certificateStatus'
          }
        ]}
        scroll={{
          x: 'max-content'
        }}
        rowKey="id"
        bordered
        {...table.tableProps}
        pagination={{
          ...table.tableProps.pagination,
          showTotal: (total) => `共 ${total} 条`,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100']
        }}
      />
      {/* end表格 */}
    </Drawer>
  );
};

export default forwardRef(Paper);
